<template>
	<div class="app-container">
		<!--设备发现-->
		<el-col :span="24" :xs="24">
			<el-form
				v-show="showSearch"
				ref="queryForm"
				:model="queryParams"
				:inline="true"
				label-width="68px"
			>
				<el-form-item :label="$t('elButton.equipmentName')" prop="code">
					<el-input
						clearable
						size="small"
						placeholder="设备标识"
						v-model="queryParams.code"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item :label="$t('elButton.equipmentName')" prop="name">
					<el-input
						clearable
						size="small"
						v-model="queryParams.name"
						:placeholder="$t('elButton.equipmentNameInput')"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="ip地址" prop="ipAddress">
					<el-input
						clearable
						size="small"
						placeholder="ip地址"
						v-model="queryParams.ipAddress"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="状态" prop="online">
					<el-select
						v-model="queryParams.online"
						:placeholder="$t('equipment.online')"
						clearable
						size="small"
					>
						<el-option
							v-for="dict in [
								{ value: 0, label: '离线' },
								{ value: 1, label: '在线' },
							]"
							:key="dict.value"
							:label="dict.label"
							:value="dict.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('elButton.establishTime')">
					<el-date-picker
						v-model="dateRange"
						size="small"
						style="width: 240px"
						type="daterange"
						value-format="yyyy-MM-dd"
						range-separator="-"
						:start-placeholder="$t('elButton.startTime')"
						:end-placeholder="$t('elButton.endTime')"
					/>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="mini"
						@click="handleQuery"
						>{{ $t('elButton.search') }}
					</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
						$t('elButton.reset')
					}}</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="loading" :data="deviceList" border>
				<el-table-column
					:label="$t('equipment.identification')"
					align="center"
					prop="code"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					:label="$t('equipment.name')"
					align="center"
					prop="name"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="设备类型"
					align="center"
					prop="type"
					:formatter="typeFormat"
				/>
				<el-table-column label="当前科室" align="center" prop="bizName" />
				<el-table-column label="当前诊室" align="center" prop="counterName" />
				<el-table-column
					:label="$t('equipment.ip')"
					align="center"
					prop="ipAddress"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					:label="$t('equipment.edition')"
					align="center"
					prop="softVersion"
				/>
				<el-table-column
					:label="$t('equipment.onlineStatus')"
					align="center"
					prop="online"
				>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.online === '0'" type="danger">{{
							$t('equipment.isUnderline')
						}}</el-tag>
						<el-tag v-if="scope.row.online === '1'" type="success">{{
							$t('equipment.isOnline')
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('equipment.createTime')"
					align="center"
					prop="createTime"
					width="180"
				>
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.createTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					width="220px"
					:label="$t('equipment.control')"
					align="center"
					class-name="small-padding fixed-width"
					fixed="right"
				>
					<template slot-scope="scope">
						<el-button
							v-hasPerm="['device_edit']"
							size="mini"
							type="text"
							icon="el-icon-edit"
							@click="handleEdit(scope.row)"
							>{{ $t('elButton.change') }}
						</el-button>
						<el-button
							v-hasPerm="['device_del']"
							size="mini"
							type="text"
							icon="el-icon-delete"
							@click="handleDel(scope.row)"
							>{{ $t('elButton.delete') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="total > 0"
				:total="total"
				:page.sync="queryParams.current"
				:limit.sync="queryParams.size"
				@pagination="getList"
			/>
		</el-col>
		<el-dialog
			append-to-body="true"
			title="提示"
			:visible.sync="dialogVisible"
			width="30%"
		>
			<el-form :model="form" label-width="110px" :rules="rules">
				<el-form-item label="叫号器名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="设备标识">
					<el-input readonly v-model="form.code"></el-input>
				</el-form-item>
				<el-form-item label="显示设备绑定">
					<el-select
						v-model="form.displayCode"
						placeholder="请选择"
						multiple
						filterable
					>
						<el-option
							v-for="item in bindDeviceList"
							:key="item.code"
							:label="item.name"
							:value="item.code"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="播报设备绑定">
					<el-select
						v-model="form.broadcastCode"
						placeholder="请选择"
						multiple
						filterable
					>
						<el-option
							v-for="item in bindDeviceList"
							:key="item.code"
							:label="item.name"
							:value="item.code"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
	listDevice,
	callListDevice,
	updateStatus,
	editDevice,
  delDevice
} from '@/api/ips/device'
export default {
	name: 'Discovery',
	components: { Treeselect },
	data() {
		return {
			// 设备表格数据
			deviceList: [],
			// 遮罩层
			loading: false,
			total: 0,
			// 弹框显隐
			dialogVisible: false,
			// 选中数组
			ids: [],
			// 总条数
			statusOptions: [], // 查询参数
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
				ipAddress: undefined,
				online: undefined,
				name: undefined,
				code: undefined,
			},
			// 显示搜索条件
			showSearch: true,
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				name: [
					{
						required: true,
						message: this.$t('edition.nameEmpty'),
						trigger: 'blur',
					},
				],
				code: [
					{
						required: true,
						message: this.$t('edition.numberEmpty'),
						trigger: 'blur',
					},
				],
				type: [
					{
						required: true,
						message: this.$t('edition.styleEmpty'),
						trigger: 'blur',
					},
				],
				appDesc: [
					{
						required: true,
						message: this.$t('edition.explainEmpty'),
						trigger: 'blur',
					},
				],
			},
			deviceStatus: [{ label: '在线', value: 0 }, { label: '离线', value: 1 }],
			bindDeviceList: [],
			typeOptions: [],
		}
	},
	created() {
		this.getList()
		this.getListDevice()
		this.getDicts('device_type').then((response) => {
			this.typeOptions = response.data
		})
	},
	mounted() {},
	methods: {
		// 设备类型字典翻译
		typeFormat(row, column) {
			return this.selectDictLabel(this.typeOptions, row.type)
		},
		/** 查询设备列表 */
		getList() {
			this.loading = true
			callListDevice(this.addDateRange(this.queryParams, this.dateRange)).then(
				(response) => {
					this.deviceList = response.data
					this.deviceIds = []
					this.deviceList.forEach((element) => {
						this.deviceIds.push(element.id)
					})
					this.total = response.total
					this.loading = false
				}
			)
		},
		async getListDevice() {
			const { data } = await listDevice({ size: 10000 })
			this.bindDeviceList = data
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.dateRange = []
			// this.queryParams.code = ''
			// this.queryParams.ipAddress = ''
			// this.queryParams.online = ''
			this.$refs.queryForm.resetFields()
			// this.resetForm('queryForm')
			this.handleQuery()
		},
		/** 删除按钮操作 */
		handleDel(row) {
			const ids = row.id || this.ids
			this.$confirm(
				this.$t('equipment.deleteEquipment1') +
					ids +
					this.$t('equipment.deleteEquipment2'),
				this.$t('tip'),
				{
					confirmButtonText: this.$t('submitText'),
					cancelButtonText: this.$t('cancelText'),
					type: 'warning',
				}
			)
				.then(function() {
					return delDevice(ids)
				})
				.then(() => {
					this.getList()
					this.msgSuccess(this.$t('deleteSuccess'))
				})
				.catch(function() {})
		},
		// 编辑
		handleEdit(row) {
			this.form = JSON.parse(JSON.stringify(row))
			if (this.form.broadcastCode) {
				this.form.broadcastCode = row.broadcastCode.split(',')
			}
			if (this.form.displayCode) {
				this.form.displayCode = row.displayCode.split(',')
			}
			console.log(`this.form`, this.form)
			this.dialogVisible = true
		},
		confirmEdit() {
			if (this.form.broadcastCode) {
				this.form.broadcastCode = this.form.broadcastCode.join(',')
			}
			if (this.form.displayCode) {
				this.form.displayCode = this.form.displayCode.join(',')
			}
			editDevice(this.form).then((response) => {
				if (response.code === 0) {
					this.msgSuccess(this.$t('loginLog.changeSuccess'))
					this.dialogVisible = false
					this.form = {}
					this.getList()
				} else {
					this.msgError(response.msg)
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.app-container {
	.custom-dialog {
		.el-select {
			width: 100%;
		}
	}
}
</style>
